<{include file="Public/top.html" }>
	</head>
	<body>
		<div id="warpper">
            <div class="content">
                <div class="location">轮播管理</div>
                <{include file="./nav.html" }>
                <table class="focus-table">
                    <thead>
                    <tr>
                        <td class="pct7">排序
                            <span class="prompt">
                                <span class="icon-info"></span>
                                <p style="display:none;" class="promptBox">显示顺序按从大到小排</p>
                            </span>
                        </td>
                        <td class="pct35">链接
                            <span class="prompt">
                                <span class="icon-info"></span>
                                <p style="display:none;" class="promptBox">外站跳转地址必须以http://开头</p>
                            </span>
                        </td>
                        <td class="pct25">图片
                            <span class="prompt">
                                <span class="icon-info"></span>
                                <p style="display:none;" class="promptBox"><{$picWidth}>x<{$picHeight}></p>
                            </span>
                        </td>
                        <td class="pct10">状态</td>
                        <td class="pct10">操作</td>
                    </tr>
                    </thead>
                </table>
                <{foreach from=$list item=item}>
                    <form method="post">
                        <table  class="focus-table">
                            <tbody>
                                <tr>
                                    <td class="pct7">
                                        <input type="text" class="ui-text" name="showOrder" value="<{$item.showOrder}>" required  <{if $item.isOn}>disabled="true"<{/if}>/>
                                    </td>
                                    <td class="pct35">
                                        <textarea  <{if $item.relatedType<>$OUTER}>disabled<{/if}> class="ui-textarea" style="width:60%; height:60px;" name="title"  placeholder="仅当类型为外站资源时有效" <{if $item.isOn}>disabled="true"<{/if}>><{$item.jumpUrl}></textarea>
                                        <br><label style="line-height: 32px;">管理选择</label>
                                        <select id="type<{$item.id}>" name="relatedType" class="ui-select" <{if $item.isOn}>disabled="true"<{/if}> onchange="ajaxGetRelated(this,function(obj){
                                            var $this=$(obj);
                                            if($this.val()==<{$OUTER}>){
                                                $this.parent().find('textarea').removeAttr('disabled')
                                            }else{
                                                $this.parent().find('textarea').attr('disabled',true);
                                            }
                                        }
                                        )">
                                            <{html_options options=$objType selected=$item.relatedType }>
                                        </select>
                                        <select id="rid<{$item.relatedID}>" name="relatedID" class="ui-select" <{if $item.isOn}>disabled="true"<{/if}>>
                                            <option value="<{$item.relatedID}>">不修改</option>
                                        </select>
                                        <script>

                                            $(document).ready(function(){
                                                ajaxGetRelated(document.getElementById('type<{$item.id}>'),function(){
                                                    $('#rid<{$item.relatedID}>').val(<{$item.relatedID}>);
                                                });
                                            });

                                        </script>
                                    </td>
                                    <td class="ui-form-item2 pct25 uploader">
                                         <span class="picture_box picture_270">
                                            <div class="a-imgBox" <{if $item.pic}>style="display:block;"<{else}>style="display:none;"<{/if}> >
                                                <input type="hidden" name="pic" value="<{$preUploadUrl}><{$item.pic}>">
                                                <a href="javascript:void(0);" class="a-close" onclick="removeElement(this)" <{if $item.isOn}>style="display:none;"<{else}>style="display:block;"<{/if}>></a>
                                                <img src="<{$preUploadUrl}><{$item.pic}>" width="270" height="169" />
                                            </div>
                                            <div>
                                                <a href="javascript:;" class="a-upload">
                                                    <input type="file" name="file" onchange="showUnSave(this)" >
                                                </a>
                                                <i>上传图片</i>
                                                <i><{$picWidth}>*<{$picHeight}></i>
                                            </div>
                                        </span>

                                    </td>
                                    <td class="pct10"><{if $item.isOn}>已上架<{else}>已下架<{/if}>
                                    </td>
                                    <td class="ta_l pct10">
                                        <input type="hidden" value="<{$item.id}>"  class="mqID" name="id"/>
                                        <div class="handler">
                                            <{if !$item.isOn}>
                                                <a onclick="saveMQ(this,'<{$item.isOn}>')">保存</a>
                                                <span class="sep">|</span>
                                            <{/if}>
                                            <a onclick="deleteMQ(this)">删除</a>
                                            <span class="sep">|</span>
                                            <a onclick="doOn('<{$item.id}>','<{$item.isOn}>')"><{if $item.isOn}>下架修改<{else}>上架<{/if}></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                <{/foreach}>
                <div id="tips">显示顺序按从大到小排</div>
                <div class="integral_btn-group">
                    <input type="button" id="addNew" onclick="addNew()" value="增加" class="ui-button "/>
                </div>
                
            </div>
		</div>

<div id="example" style="display: none">
    <form method="post">
        <table class="focus-table" >
            <tr>
                <td class="pct7">
                    <input type="text" class="ui-text" name="showOrder" value="<{$maxOrder}>" required onchange="showUnSave(this)"/>
                </td>
                <td class="pct35">
                    <textarea  disabled class="ui-textarea" style="width:60%; height:60px;" name="title"  placeholder="仅当类型为外站资源时有效" onchange="showUnSave(this)"></textarea>
                    <br><label>管理选择</label>
                    <select name="relatedType" class="ui-select" onchange="ajaxGetRelated(this,function(obj){
                                var $this=$(obj);
                                if($this.val()==<{$OUTER}>){
                                    $this.parent().find('textarea').removeAttr('disabled')
                                }else{
                                    $this.parent().find('textarea').attr('disabled',true);
                                }
                            });showUnSave(this)">
                        <option value="0">未选择</option>
                        <{html_options options=$objType}>
                    </select>
                    <select name="relatedID" class="ui-select" onchange="showUnSave(this)">
                        <option value="0">未选择</option>
                    </select>
                </td>
                <td class="ui-form-item2 pct25 uploader">
                    <span class="picture_box picture_270">
                        <div class="a-imgBox" style="display:none;">
                            <input type="hidden" name="pic">
                            <a href="javascript:void(0);" class="a-close" onclick="removeElement(this)"></a>
                            <img src="" width="270" height="169" />
                        </div>
                        <div>
                            <a href="javascript:;" class="a-upload">
                                <input type="file" name="file" id="" onchange="showUnSave(this)" >
                            </a>
                            <i>上传图片</i>
                            <i><{$picWidth}>*<{$picHeight}></i>
                        </div>
                    </span>
                </td>
                <td class="pct10">未保存</td>
                <td class="pct10 tal">
                    <input type="hidden" value="0"  class="mqID" name="id"/>
                    <div class="handler">
                        <a onclick="javascript:layer.msg('保存后默认下架状态'),saveMQ(this,0);">保存</a>
                        <span class="sep">|</span>
                        <a onclick="deleteMQ(this)">删除</a>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>

        <{include file="Public/foot.html" }>
        <script>
            function removeElement(obj)
            {
                $(obj).parent('.a-imgBox').css('display','none');
                $(obj).prev().val('');
            }
            $(document).ready(function(){
                $(".prompt").hover(function() {
                    $(this).find(".promptBox").animate({opacity: "show"}, "slow");
                }, function() {
                    $(this).find(".promptBox").animate({opacity: "hide"}, "fast");
                });

            });

            var position="<{$position}>";

            $("input:not(:button),select,textarea").on("change",function(){
                showUnSave(this);
            });

            function showUnSave(obj){
                $(obj).parents().filter("form").find(":button").last().val("未保存");
            }
            function deleteMQ(obj){
                var $grandp=$(obj).closest('form');
                var id=$grandp.find('.mqID').val();
                if(id==0){
                    $grandp.remove();
                    return;
                }
                $.post("<{u(indexDelete)}>", {'id':id},function(result){
                    if(result.status==0){
                        $grandp.remove();
                    }else{
                        layer.msg("删除失败");
                    }
                },'json');
            }
            function saveMQ(obj,status){
                var $grandp=$(obj).closest('form');
                var data= $grandp.serialize()+"&position="+position+"&isOn="+status;
                if($($grandp).find("input[type='text']").val() == ""){
                    layer.msg("请输入排序编号");
                    return false;
                }
                if($($grandp).find("select[name=relatedType]").val()!='<{$OUTER}>'){
                    if($($grandp).find("select[name=relatedID]").val() == 0){
                        layer.msg("请选择对应跳转地址");
                        return false;
                    }
                }

                if($($grandp).find("input[name='pic']").val() == ""){
                    layer.msg("请选取上传图片");
                    return false;
                }

                $.post("<{u(indexSave)}>", data,function(result){
                    console.log(result);
                    if(result.status==0){
                        layer.msg(result.msg);
                        $grandp.find('.mqID').val(result.data);
                        location.reload();
                    } else{
                        layer.msg(result.msg);
                    }
                },'json');

            }
            function addNew(){
                $("#tips").before($('#example').clone().html());
                $('.uploader').uploader();
            }

            function doOn(id,isOn){
                var param = {id:id,isOn:isOn};
                $.post("<{U(doOnOff)}>",param,function(result){
                    console.log(result);
                    layer.msg(result.msg);
                    if(result.status == 0){
                        location.reload();
                    }
                },'json');
            }

            //图片上传
            (function ($) {
                'use strict';
                $.fn.uploader = function () {
                    return this.each(function () {
                        var $this = $(this);
                        //var $img = $this.find('img.main');
                        var $file = $this.find('input[type=file]');
                        var $hidden = $this.find('input[type=hidden]');
                        var $img = $this.find('img');
                        var $imgBox = $this.find('div[class=a-imgBox]');
                        // var $size = $this.find('span.size');
                        /*$img.on('load', function () {
                         var width = $(this).width();
                         var height = $(this).height();
                         $hidden.val($img.attr('src'));
                         $size.text(width + 'x' + height);
                         });*/
                        var position = "<{$position}>";
                        var from = null;
                        if(position == 1){//wap主页轮播图
                            from = "IMG_WAP_INDEX_MARQUEE";
                        } else if(position ==2){//wap积分商城首页轮播图
                            from = "IMG_POINT_MARQUEE";
                        } else if(position == 3){//web主页轮播图
                            from = "IMG_WEB_INDEX_MARQUEE";
                        }
                        $file.AjaxFileUpload({
                            action: './api.php?m=Api&c=index&a=ajaxUpload&from='+from,
                            onSubmit: function () {
                                //$txt.text('上传中');
                                layer.msg("上传中，请稍候");
                                console.log("开始上传");
                            },
                            onComplete: function (filename, response) {
                                if(parseInt(response.id)>0){
                                   // $txt.text("上传成功");
                                    layer.closeAll();
                                    layer.msg("上传成功");
                                    console.log("上传成功");
                                    $imgBox.css('display','block');
                                }else{
                                    console.log(response.msg);
                                   // $txt.text(response.msg);
                                    return;
                                }
                                $hidden.attr('value', response.msg);
                                $img.attr('src',response.msg);
                            }
                        });
                    });
                }

            })(jQuery);

            $('.uploader').uploader();
        </script>
	</body>
</html>
